<template>
  <div>
    <a-modal :title="type == 'add' ? '新增规格模板' : '编辑规格模板'" :visible="visible" @before-open="open" @before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="800px" :mask-closable="false">
      <div>
        <a-form auto-label-width ref="formRef" size="medium" :model="form">
          <a-space direction="vertical" :size="24">
            <a-row>
              <a-col :span="10">
                <a-form-item field="name" label="规格模板名称" :rules="rules.name">
                  <a-input placeholder="请输入规格模板名称" v-model="form.name"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="排序">
                  <a-input v-model="form.sort" placeholder="排序"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
          </a-space>
        </a-form>
      </div>
      <div class="title-bar">规格信息</div>
      <a-button class="gray-outline mb10" @click="selSpecification.visible = true">选择规格</a-button>
      <a-table class="table-two-line" size="mini" :pagination="false" :data="list" @change="handleChange" :draggable="{ type: 'handle', width: 40 }" :scroll="{ y: 380 }">
        <template #columns>
          <a-table-column title="序号" :width="40" #cell="{ rowIndex }">{{ rowIndex + 1 }} </a-table-column>
          <a-table-column title="规格中文名称" :width="120" #cell="{ record }">{{ record.nameCn }} </a-table-column>
          <a-table-column title="规格英文名称" :width="120" #cell="{ record }">{{ record.nameEn }} </a-table-column>
          <!-- <a-table-column title="规格标识" :width="120" #cell="{ record }">{{ rowIndex + 1 }} </a-table-column> -->
          <a-table-column title="操作" #cell="{ record, rowIndex }" :width="40">
            <a-button class="gray-outline ml10" size="mini" @click="list.splice(rowIndex, 1)">
              <icon-minus />
            </a-button>
          </a-table-column>
        </template>
      </a-table>

      <template #footer>
        <a-button class="gray-outline" @click="handleCancel">取消</a-button>
        <a-button type="primary" :loading="loading" @click="handleOk">确定</a-button>
      </template>
    </a-modal>
  </div>
  <SelSpecification ref="selSpecification" @save="sel" />
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { findWarehouseListByParam } from '@/api/warehouse'
  import { updatePackageWarehouse } from '@/api/order'
  import { saveOrUpdateProductSpecTemplate } from '@/api/product'
  import { Message } from '@arco-design/web-vue'
  import SelSpecification from './selSpecification.vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['type', 'info'],
    components: { SelSpecification },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const formRef = ref()
      const selSpecification = ref()
      const data: any = reactive({
        form: {},
        rules: {
          name: [{ required: true, message: '请输入规格模板名称' }],
        },
        loading: false,
        list: [],
      })

      const open = () => {
        if (props.type == 'edit') {
          data.form = _.cloneDeep(props.info)
          data.list = data.form.specList
        }
      }

      const handleOk = () => {
        formRef.value.validate(async (valid: any) => {
          if (!valid) {
            if (!data.list[0]) {
              return Message.error('请选择规格')
            }
            let params = {
              ...data.form,
              specList: data.list,
            }
            // data.list.forEach((e: any) => {
            //   let obj = { id: e.id }
            //   params.specList.push(obj)
            // })
            try {
              data.loading = true
              const res: any = await saveOrUpdateProductSpecTemplate([params])
              if (res.code == 'SUCCESS') {
                props.type == 'add' ? Message.success('新增成功') : Message.success('编辑成功')
                handleCancel()
                emit('save')
              }
            } catch (error) {}
            data.loading = false
          }
        })
      }

      const handleCancel = () => {
        data.list = []
        formRef.value.resetFields()
        formRef.value.clearValidate()
        visible.value = false
      }

      const handleChange = (list: any) => {
        data.list = list
      }

      const sel = (ids: any) => {
        if (data.list[0]) {
          ids.forEach((e: any) => {
            let index: any = data.list.findIndex((el: any) => e.id == el.id)
            if (index == -1) data.list.push(e)
          })
        } else {
          data.list = ids
        }
      }

      return {
        ...(toRefs(data) as any),
        visible,
        formRef,
        open,
        handleOk,
        handleCancel,
        handleChange,
        selSpecification,
        sel,
      }
    },
  })
</script>

<style lang="less" scoped></style>
